@layout("/common/container.html", {"title" : "个人中心", plugin: "cropper, pwstrength-bootstrap"}){
<style>
    .security-setting {
        list-style: none;
        padding-left: 0;
    }

    .security-setting li {
        padding: 15px 0;
    }

    .security-setting .describe {
        padding: 15px 0;
    }

    .security-setting .describe p {
        margin-bottom: 0;
    }

    .security-setting .icon {
        width: 120px;
    }
    .security-setting .icon .e-svg-icon{
        height: 40px;
        width: 40px;
    }
</style>
<div class="row">
    <div class="col-xl-3 col-lg-4">
        <div class="card card--height-fluid-">
            <div class="card-body">

                <!--begin::Widget -->
                <div class="e-user-profile">
                    <div class="e-user-profile-head">
                        <div id="user-avatar" class="e-user-profile-media" data-aspect-ratio="1" data-toggle="e-tooltip" data-original-title="更改头像">
                            @if(strUtil.isNotBlank(user.avatar)){
                            <img src="${ctxPath}${user.avatar}" alt="用户头像"/>
                            @}else{
                            <span class="badge badge--username badge--unified-success badge--xxl badge--rounded badge--bold">${strutil.subStringTo(user.nickname, 0, 1)}</span>
                            @}
                        </div>
                        <div class="e-user-profile-content">
                            <div class="e-user-profile-section">
                                <span class="e-user-profile-username">
                                    ${user.nickname}
<!--                                    <i class="flaticon2-correct e-font-success"></i>-->
                                </span>
                                <span class="e-user-profile-subtitle">
                                    ${user.department.name}
                                </span>
                            </div>
                            <div class="e-user-profile-action">
                                @if(user.sex == null) {
                                    <span class="badge badge--unified-success badge--rounded badge--bold badge--inline">-</span>&nbsp;
                                @} else {
                                    @if(SexConst.BOY == user.sex){
                                        <span class="badge badge--unified-success badge--rounded badge--bold badge--inline"><i class="la la-mars"></i></span>&nbsp;
                                    @} else {
                                        <span class="badge badge--unified-danger badge--rounded badge--bold badge--inline"><i class="la la-mars-stroke"></i></span>&nbsp;
                                    @}
                                @}
                                <span class="badge badge--unified-brand badge--rounded badge--bold badge--inline">${user.age}岁</span>
                            </div>
                        </div>
                    </div>
                    <div class="e-user-profile-body">
                        <div class="e-user-profile-content">
                            <div class="e-user-profile-info">
                                <span class="e-user-profile-label">邮箱:</span>
                                <a href="#" class="e-user-profile-data">${user.email}</a>
                            </div>
                            <div class="e-user-profile-info">
                                <span class="e-user-profile-label">手机号码:</span>
                                <a href="#" class="e-user-profile-data">${user.phone}</a>
                            </div>
                            <div class="e-user-profile-info">
                                <span class="e-user-profile-label">上次登录:</span>
                                <span class="e-user-profile-data">${user.lastLogin,dateFormat='yyyy-MM-dd HH:mm'}</span>
                            </div>
                        </div>
                        <div class="e-user-profile-items">
                            <a href="javascript:;" data-link-type="overview" data-url="${ctxPath}/auth/sys/user/personal/center/overview" class="e-user-profile-item e-user-profile-item--active">
                                <span class="e-user-profile-section">
                                    <span class="e-user-profile-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <polygon id="Bound" points="0 0 24 0 24 24 0 24"></polygon>
                                                <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                                                <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" id="Path" fill="#000000" opacity="0.3"></path>
                                            </g>
                                        </svg>
                                    </span>
                                    <span class="e-user-profile-desc">
                                        概览
                                    </span>
                                </span>
                            </a>
                            <a href="javascript:;" data-url="${ctxPath}/auth/sys/user/personal/center/personal/settings" class="e-user-profile-item ">
                                <span class="e-user-profile-section">
                                    <span class="e-user-profile-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
                                                <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" id="Mask" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" id="Mask-Copy" fill="#000000" fill-rule="nonzero"></path>
                                            </g>
                                        </svg>
                                    </span>
                                    <span class="e-user-profile-desc">
                                        个人资料
                                    </span>
                                </span>
                            </a>
                            <a href="javascript:;" data-url="${ctxPath}/auth/sys/user/personal/center/security/settings" class="e-user-profile-item ">
                                <span class="e-user-profile-section">
                                    <span class="e-user-profile-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect id="bound" x="0" y="0" width="24" height="24"/>
                                                <circle id="Oval-5" fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                                <path d="M14.5,11 C15.0522847,11 15.5,11.4477153 15.5,12 L15.5,15 C15.5,15.5522847 15.0522847,16 14.5,16 L9.5,16 C8.94771525,16 8.5,15.5522847 8.5,15 L8.5,12 C8.5,11.4477153 8.94771525,11 9.5,11 L9.5,10.5 C9.5,9.11928813 10.6192881,8 12,8 C13.3807119,8 14.5,9.11928813 14.5,10.5 L14.5,11 Z M12,9 C11.1715729,9 10.5,9.67157288 10.5,10.5 L10.5,11 L13.5,11 L13.5,10.5 C13.5,9.67157288 12.8284271,9 12,9 Z" id="Combined-Shape" fill="#000000"/>
                                            </g>
                                        </svg>
                                    </span>
                                    <span class="e-user-profile-desc">
                                        安全设置
                                    </span>
                                </span>
                            </a>
                            <a href="javascript:;" data-link-type="change-password" data-url="${ctxPath}/auth/sys/user/personal/center/change/password" class="e-user-profile-item ">
                                <span class="e-user-profile-section">
                                    <span class="e-user-profile-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                                <path d="M4,4 L11.6314229,2.5691082 C11.8750185,2.52343403 12.1249815,2.52343403 12.3685771,2.5691082 L20,4 L20,13.2830094 C20,16.2173861 18.4883464,18.9447835 16,20.5 L12.5299989,22.6687507 C12.2057287,22.8714196 11.7942713,22.8714196 11.4700011,22.6687507 L8,20.5 C5.51165358,18.9447835 4,16.2173861 4,13.2830094 L4,4 Z" id="Path-50" fill="#000000" opacity="0.3"></path>
                                                <path d="M12,11 C10.8954305,11 10,10.1045695 10,9 C10,7.8954305 10.8954305,7 12,7 C13.1045695,7 14,7.8954305 14,9 C14,10.1045695 13.1045695,11 12,11 Z" id="Mask" fill="#000000" opacity="0.3"></path>
                                                <path d="M7.00036205,16.4995035 C7.21569918,13.5165724 9.36772908,12 11.9907452,12 C14.6506758,12 16.8360465,13.4332455 16.9988413,16.5 C17.0053266,16.6221713 16.9988413,17 16.5815,17 C14.5228466,17 11.463736,17 7.4041679,17 C7.26484009,17 6.98863236,16.6619875 7.00036205,16.4995035 Z" id="Mask-Copy" fill="#000000" opacity="0.3"></path>
                                            </g>
                                        </svg>
                                    </span>
                                    <span class="e-user-profile-desc">
                                        密码修改
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                <!--end::Widget -->
            </div>
        </div>
    </div>
    <div class="col-xl-9 col-lg-8" id="e-right-page">

    </div>
</div>

<!--begin::密保邮箱-->
<div class="modal fade" id="change-mail" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form class="e-form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">更改邮箱</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group e-form-group row">
                        <label for="mail" class="col-2 col-form-label">密保邮箱：</label>
                        <div class="col-10">
                            <input type="email" id="mail" class="form-control" placeholder="请输入邮箱" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary mail-save">确认</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--end::密保邮箱-->

<!--begin::密保手机-->
<div class="modal fade" id="change-phone" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">更改手机</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="e-form">
                    <div class="form-group e-form-group row">
                        <label for="phone" class="col-sm-2 col-3 col-form-label">密保手机：</label>
                        <div class="col-sm-10 col-9">
                            <div class="input-group">
                                <input type="number" id="phone" class="form-control" placeholder="请输入手机号">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button">获取验证码</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group e-form-group row">
                        <label for="phone" class="col-2 col-form-label">验证码：</label>
                        <div class="col-10">
                            <input type="number" id="code" class="form-control" placeholder="请输入短信验证码">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary cropper-save">确认</button>
            </div>
        </div>
    </div>
</div>
<!--end::密保手机-->
@include("/common/plugins/html/cropper.html", {"title": "头像设置"}){}
<!--begin::页面脚本 -->
<script>
    // 已发送
    let STATUS_HAS_BEEN_SENT = '';
    // 重要
    let IMPORTANT_YES = '';
</script>
<#script src="static/modular/sys/user/personal/center/view.js" />
<#script src="static/modular/sys/user/personal/center/overview.js" />
<!--end::页面脚本 -->
@}